<template>
  <div class="dt-talk-member por" ref="scrollMember">
    <div class="dt-member-title">
      <span>群规则</span>
      <div
        class="dt-member-opera"
        @click="openRuleEdit"
        v-if="group_info.userList && (group_info.userList[0].userRole == 1 || group_info.userList[0].userRole == 2)"
      >
        <i class="el-icon-plus"></i>
      </div>
    </div>

    <div class="rule-box" @click="showRule">
      <div
        class="rule-empty"
        v-if="!group_info.groupRuleSetting || (!group_info.groupRule && !(group_info.groupRuleAnnexList && group_info.groupRuleAnnexList.length))"
      >
        暂无内容
      </div>
      <div class="content" v-if="group_info.groupRule">
        <p v-for="(r, j) in group_info.groupRule" :key="'info' + j">
          <span v-if="r">{{ r }}</span>
          <span v-else class="span-zw">占位</span>
        </p>
      </div>
      <div class="none" v-if="group_info.groupRule"></div>
      <div class="file" v-if="group_info.groupRuleAnnexList && group_info.groupRuleAnnexList.length">
        <img :src="`/skb/img/file/ic_file-${$tools.getFilePngByFileSuffix(group_info.groupRuleAnnexList[0].fileSuffix)}36.svg`" alt="" />
        <div class="right">
          <div class="name single-line" :title="group_info.groupRuleAnnexList[0].folderName">{{ group_info.groupRuleAnnexList[0].folderName }}</div>
          <div class="size">{{ $tools.convertUnit(group_info.groupRuleAnnexList[0].fileSize) }}</div>
        </div>
      </div>
    </div>
    <div class="dt-member-title">
      <span>成员列表</span>
      <!-- <div class="dt-member-opera">
        <img src="/skb/img/add-user.png" @click="isShowInvite" v-if="is_member_delete" />
        <i class="el-icon-delete" @click="isShowDelet" v-if="is_member_delete"></i>
      </div> -->
    </div>
    <div class="dt-member-search">
      <el-input v-model="memberKeywords" placeholder="搜索成员" @input="debouncedSearch">
        <i class="el-icon-search" slot="suffix"></i>
      </el-input>
    </div>
    <div class="dt-member-items">
      <template v-if="member_list.length > 0">
        <div
          class="dt-member-item"
          v-for="(item, index) in member_list"
          :key="item.userId"
          :ref="item.groupId + '-' + index"
          @contextmenu.prevent.stop="showSendMenu($event, item, 'member', index, $refs.scrollMember, 'dt-talk-member')"
        >
          <div class="dt-member-item-headimg">
            <el-image
              :src="$tools.getStsFileUrl(secret_uid, item.headImg)"
              alt=""
              @click.stop="showSendHome($event, 'member', item, $refs.scrollMember, 'dt-talk-member')"
              @load="$tools.loadImgCenter($event, 26)"
            >
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-loading"></i>
              </div>
            </el-image>
          </div>
          <span :title="item.userName">{{ item.userName | filterMemberName }}</span>
          <em v-if="item.userRole === 1">（群主）</em>
          <em v-if="item.userRole === 2">（管理员）</em>
          <span v-if="item.userRole !== 1 && item.leaderLevel">（{{ item.leaderLevel | filterLevel }}）</span>
          <ul v-show="item.is_show_member_menu && item.userId != uid" :class="[is_card_up ? 'up' : '']">
            <li @click="shortcutMenu({ type: 1, userId: item.userId, userName: item.userName })">@{{ item.userName | filterMemberName }}</li>
            <li @click="shortcutMenu({ type: 2, userId: item.userId, userName: item.userName })">悄悄话</li>
            <li @click="shortcutMenu({ type: 3, userId: item.userId, userName: item.userName })">回执消息</li>
            <!-- <li v-show="!pure_user_id" @click="enterPureMode(item.userId)">纯净模式</li> -->
            <div class="dt-remove-group" v-if="is_member_delete">
              <li v-if="addUserType == 1 && item.leaderLevel == 0" @click="removeOutConfirm(item.userId, item.userName, item.bindId, index)">
                移出群聊
              </li>
              <li
                v-else-if="addUserType == 2 && item.userRole == 3 && item.leaderLevel == 0"
                @click="removeOutConfirm(item.userId, item.userName, item.bindId, index)"
              >
                移出群聊
              </li>
            </div>
          </ul>
          <!-- 个人信息页 -->
          <el-card :class="['box-card', 'dt-home-info', 'left', is_card_up ? 'up' : '']" v-show="item.is_show_member_home">
            <div v-show="!home_info.id" v-loading="true" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"></div>
            <dl v-show="home_info.id">
              <dt>
                <div class="dt-home-head-img">
                  <el-image :src="$tools.getStsFileUrl(secret_uid, item.headImg)" alt="" @load="$tools.loadImgCenter($event, 52)">
                    <div slot="placeholder" class="image-slot">
                      <i class="el-icon-loading"></i>
                    </div>
                  </el-image>
                </div>
                <div class="dt-home-realName">
                  <div>
                    <h3>{{ (home_info.certificateName ? home_info.certificateName : 'UID' + home_info.id) | filterMemberName }}</h3>
                    <i v-if="home_info.gender != 0" :class="{ boy: home_info.gender == 1 }"></i>
                  </div>
                  <p class="dt-home-uid">UID{{ home_info.id }}</p>
                </div>
              </dt>
              <dd class="dt-home-dd">
                <div>
                  <span class="dt-home-label">地区</span>
                  <span class="dt-home-cont">{{ home_info.liveplace ? home_info.liveplace : '暂未设置' }}</span>
                </div>
                <div>
                  <span class="dt-home-label">
                    IP
                    <el-popover
                      popper-class="home-popover"
                      placement="top-start"
                      title="响应「互联网用户账号信息管理规定」，维护网络安全，展示IP属地"
                      width="200"
                      trigger="hover"
                      content="IP 属地以网络运营商提供的信息为准，与地理位置可能不一致"
                    >
                      <template #reference>
                        <!-- 图标作为触发元素 -->
                        <i class="el-icon-question" style="cursor: pointer; color: #ced2db; font-size: 16px"></i>
                      </template>
                    </el-popover>
                  </span>
                  <span class="dt-home-cont">{{ home_info.lastLoginAddress ? home_info.lastLoginAddress : '暂未设置' }}</span>
                </div>
              </dd>
              <dd>
                <div>
                  <span class="dt-home-label">个性签名</span>
                  <span class="dt-home-cont">{{ home_info.personalSignature ? home_info.personalSignature : '暂未设置' }}</span>
                </div>
              </dd>
            </dl>
          </el-card>
        </div>
      </template>
      <div v-else class="dt-member-no">暂无成员</div>
    </div>

    <!-- 群规则编辑 -->
    <el-dialog
      :title="group_info.groupUid == uid ? '设置群规则' : '群规则'"
      class="dt-chat-group-rules dt-chat-group-set-rules"
      :visible.sync="chat_rules_edit"
      width="680px"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="uploadForm" @submit.native.prevent label-position="left" label-width="82px" size="medium">
        <el-form-item label="成员确认" :style="{ 'margin-bottom': uploadForm.groupRuleSetting ? '15px' : '0' }">
          <el-switch v-model="uploadForm.groupRuleSetting" style="vertical-align: -5px"></el-switch>
          <span class="tip">开启成员确认后，群成员需同意群规才能进入群聊</span>
        </el-form-item>
        <el-form-item label="群规则内容" v-show="uploadForm.groupRuleSetting">
          <el-input type="textarea" v-model="uploadForm.groupRule" placeholder="请输入群规则" rows="5" maxlength="500" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="添加附件" v-show="uploadForm.groupRuleSetting">
          <el-upload
            ref="uploadRef"
            action="#"
            :http-request="httpRequest"
            :show-file-list="false"
            :limit="1"
            :on-exceed="handleExceed"
            :disabled="hasFile"
            :before-upload="beforeAvatarUpload"
            :accept="'.jpg,.jpeg,.png,,.pdf,.doc,.docx,.xls,.xlsx'"
          >
            <div class="upload-box">
              <div class="btn" :class="{ hasFile: hasFile }"><i class="el-icon-upload2"></i>添加附件</div>
              <div class="tip">仅能上传1个附件，单个文件小于10M</div>
            </div>
          </el-upload>
          <div class="upload-info" v-if="hasFile">
            <span class="name single-line" :title="uploadForm.groupRuleAnnex[0].folderName"
              ><img src="/skb/img/file/file.png" alt="" />{{ uploadForm.groupRuleAnnex[0].folderName }}</span
            >
            <span class="btn" @click="delFile">删除</span>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="saveRule()" :loading="loading">保存</el-button>
        <el-button size="medium" @click="cancelRule()">取消</el-button>
      </span>
    </el-dialog>
    <!-- 群规则提示 -->
    <el-dialog
      :title="hiddenBtn ? '群规则' : group_info.groupName + '-群规则'"
      class="dt-chat-group-rules"
      :visible.sync="chat_rules"
      width="680px"
      :show-close="hiddenBtn"
      :append-to-body="true"
      :close-on-click-modal="hiddenBtn"
      :close-on-press-escape="false"
    >
      <!-- <p class="dt-chat-group-rules-tips">请您认真阅读以下群规则，并同意遵守群聊规则：</p> -->
      <div class="dt-chat-group-rules-content">
        <p v-for="(item, index) in group_info.groupRule" :key="index + '_' + group_info.id">
          <span v-if="item">{{ item }}</span>
          <span v-else class="span-zw">占位</span>
        </p>
        <div
          class="file"
          :class="{ noTop: !group_info.groupRule }"
          v-if="group_info.groupRuleAnnexList && group_info.groupRuleAnnexList.length"
          @click="downloadFile(group_info.groupRuleAnnexList[0].fileUrl)"
        >
          <img :src="`/skb/img/file/ic_file-${$tools.getFilePngByFileSuffix(group_info.groupRuleAnnexList[0].fileSuffix)}36.svg`" alt="" />
          <div class="right">
            <div class="name single-line" :title="group_info.groupRuleAnnexList[0].folderName">{{ group_info.groupRuleAnnexList[0].folderName }}</div>
            <div class="size">{{ $tools.convertUnit(group_info.groupRuleAnnexList[0].fileSize) }}</div>
          </div>
        </div>
        <p class="mt20 tr">发布人：{{ group_info.groupRulePublisherName || group_info.groupUidName }}</p>

        <p v-if="group_info.groupRuleUpdateTime">更新日期：{{ group_info.groupRuleUpdateTime | filterDate }}</p>
        <p v-else>更新日期：--</p>
      </div>
      <span slot="footer" class="dialog-footer" v-if="!hiddenBtn">
        <el-button size="medium" type="primary" @click="processingChatRules(1)">我已阅读并同意</el-button>
        <el-button size="medium" @click="processingChatRules(2)">拒绝并退出群聊</el-button>
      </span>
    </el-dialog>
    <!-- 添加成员 -->
    <el-dialog
      title="添加成员"
      class="dialogBox"
      :visible.sync="inviteIsShow"
      :append-to-body="true"
      width="960px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialog-Box-cointent clearfix">
        <div class="dialog-Box-cointent-left l">
          <div class="dialog-Box-cointent-search">
            <el-input placeholder="Uid、实名、手机号码搜索成员" v-model.trim="keywords" size="mini">
              <el-button slot="append" icon="el-icon-search" @click="searchInviteList"></el-button>
            </el-input>
          </div>
          <div class="dialog-Box-cointent-searchResult">
            <div class="dialog-Box-cointent-searchList">
              <div class="dialog-Box-cointent-searchItem clearfix" v-for="item in inviteList" :key="item.userId">
                <el-checkbox
                  v-model="item.checked"
                  :disabled="item.userState > 0"
                  class="dialog-Box-cointent-searchItem-check"
                  @change="selectedItem(item.checked, item)"
                >
                  <el-image :src="$tools.getStsFileUrl(secret_uid, item.headImg)" @load="$tools.loadImgCenter($event, 38)">
                    <div slot="placeholder" class="image-slot">
                      <i class="el-icon-loading"></i>
                    </div>
                  </el-image>
                </el-checkbox>
                <div class="dialog-Box-cointent-searchItem-info">
                  <p>{{ item.userName }}{{ '（UID' + item.userId + '）' }}</p>
                  <!-- <p>{{ item.companyName || '暂无工作室或企业认证' }}</p> -->
                  <p>{{ item.safePhone | filterPhone }}</p>
                </div>
                <div class="dialog-Box-cointent-searchItem-line"></div>
                <div class="dialog-Box-cointent-searchItem-invite">
                  <p :class="{ invited: item.userState > 0 }">
                    <el-checkbox v-model="item.radio" @change="selectedItemHistory(item.radio, item)">历史消息可见</el-checkbox>
                  </p>
                  <p v-if="item.userState > 0">已邀请，等待处理</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-Box-cointent-right l">
          <div class="dialog-Box-cointent-right-title">
            <p>选择成员：</p>
          </div>
          <div class="dialog-Box-cointent-choose">
            <div class="dialog-Box-cointent-chooseItem clearfix" v-for="item in inviteCooseList" :key="item.userId">
              <el-image :src="$tools.getStsFileUrl(secret_uid, item.headImg)" @load="$tools.loadImgCenter($event, 38)">
                <div slot="placeholder" class="image-slot">
                  <i class="el-icon-loading"></i>
                </div>
              </el-image>
              <div class="dialog-Box-cointent-chooseItem-info">
                <p>{{ item.userName }}{{ '（UID' + item.userId + '）' }}</p>
                <!-- <p>{{ item.companyName || '暂无工作室或企业认证' }}</p> -->
                <p>{{ item.safePhone | filterPhone }}</p>
              </div>
              <div class="dialog-Box-cointent-chooseItem-line"></div>
              <div class="dialog-Box-cointent-chooseItem-invite">
                <p>
                  <el-checkbox v-model="item.radio" @change="selectedItemHistory(item.radio, item)">历史消息可见</el-checkbox
                  ><i class="el-icon-delete" @click="deleteInviteItem(item)"></i>
                </p>
              </div>
            </div>
          </div>
          <div class="dialog-Box-cointent-choose-btn">
            <el-button type="primary" size="medium" class="flr" @click="confirmInvite" :loading="inviteLock" :disabled="inviteCooseList.length == 0"
              >确 定</el-button
            >
            <el-button class="flr" size="medium" @click="handleClose">取 消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 删除成员 -->
    <el-dialog
      title="删除成员"
      class="dialogBox"
      :visible.sync="deleteIsShow"
      :append-to-body="true"
      width="960px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialog-Box-cointent clearfix">
        <div class="dialog-Box-cointent-left l">
          <div class="dialog-Box-cointent-search">
            <el-input placeholder="Uid、实名、手机号码搜索成员" v-model.trim="keywords" size="mini">
              <el-button slot="append" icon="el-icon-search" @click="fuzzySearch"></el-button>
            </el-input>
          </div>
          <div class="dialog-Box-cointent-searchResult">
            <div class="dialog-Box-cointent-searchList">
              <div class="dialog-Box-cointent-searchItem clearfix" v-for="item in inviteList" :key="item.userId">
                <!-- <el-checkbox v-model="item.checked" class="dialog-Box-cointent-searchItem-check" @change="selectedItem(item.checked,item)"
                  :disabled="item.userId == group_info.groupUid"> -->
                <el-checkbox
                  v-model="item.checked"
                  class="dialog-Box-cointent-searchItem-check"
                  @change="selectedItem(item.checked, item)"
                  :disabled="
                    (addUserType == 1 && item.userRole == 1) ||
                    (addUserType == 2 && item.userRole == 1) ||
                    (addUserType == 2 && item.userRole == 2) ||
                    item.leaderLevel > 0
                  "
                >
                  <el-image :src="$tools.getStsFileUrl(secret_uid, item.headImg)" @load="$tools.loadImgCenter($event, 38)">
                    <div slot="placeholder" class="image-slot">
                      <i class="el-icon-loading"></i>
                    </div>
                  </el-image>
                </el-checkbox>
                <div class="dialog-Box-cointent-searchItem-info">
                  <p>{{ item.userName }}{{ '（UID' + item.userId + ')' }}</p>
                  <!-- <p>{{ item.companyName || '暂无工作室或企业认证' }}</p> -->
                  <p>{{ item.safePhone | filterPhone }}</p>
                </div>
                <!-- <div class="dialog-Box-cointent-searchItem-line"></div>
                    <div class="dialog-Box-cointent-searchItem-invite">
                      <p> <el-checkbox v-model="item.radio" @change="selectedItemHistory(item.radio,item)">历史消息可见</el-checkbox></p>
                      <p>已邀请，等待处理</p>
                    </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-Box-cointent-right l">
          <div class="dialog-Box-cointent-right-title">
            <p>选择成员：</p>
          </div>
          <div class="dialog-Box-cointent-choose">
            <div class="dialog-Box-cointent-deletItem clearfix" v-for="item in inviteCooseList" :key="item.userId">
              <el-image :src="$tools.getStsFileUrl(secret_uid, item.headImg)" @load="$tools.loadImgCenter($event, 38)">
                <div slot="placeholder" class="image-slot">
                  <i class="el-icon-loading"></i>
                </div>
              </el-image>
              <div class="dialog-Box-cointent-chooseItem-info">
                <p>{{ item.userName }}{{ '（UID' + item.userId + '）' }}</p>
                <!-- <p>{{ item.companyName || '暂无工作室或企业认证' }}</p> -->
                <p>{{ item.safePhone | filterPhone }}</p>
              </div>
              <!-- <div class="dialog-Box-cointent-chooseItem-line"></div> -->
              <div class="dialog-Box-cointent-chooseItem-invite">
                <p><i class="el-icon-delete" @click="deleteInviteItem(item)"></i></p>
              </div>
            </div>
          </div>
          <div class="dialog-Box-cointent-choose-btn">
            <el-button type="primary" size="medium" class="flr" @click="confirmDelete" :loading="deleteLock" :disabled="inviteCooseList.length == 0"
              >确 定</el-button
            >
            <el-button class="flr" size="medium" @click="handleClose">取 消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      secret_uid: this.$store.state.uid,
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      is_card_up: false,
      inviteIsShow: false,
      member_list: [],
      is_member_delete: 0,
      addUserType: 0,
      // 群聊成员邀请搜索关键字
      keywords: '',
      memberKeywords: '',
      // 搜索出来的被邀请成员列表
      inviteList: [],
      //已经被选中的被邀请成员列表
      inviteCooseList: [],
      //删除成员弹框
      deleteIsShow: false,
      //删除成员用来搜索成员的原始数据
      deletSearchArr: [],
      chat_rules: false,
      group_info: '',
      // 个人主页
      home_info_style: {
        top: 0,
        left: 0
      },
      home_info: {},
      is_card_up: false,
      inviteLock: false,
      deleteLock: false,
      // 个人主页end

      //群规则编辑
      chat_rules_edit: false,
      uploadForm: {},
      hiddenBtn: false, //标记显示群规则时是否隐藏操作按钮
      loading: false
    }
  },
  filters: {
    filterDate(val) {
      return val.substring(0, 10)
    },
    filterMemberName(val) {
      return val.length > 6 ? val.substring(0, 6) + '...' : val
    },
    filterLevel(val) {
      var level = [null, '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
      return level[val] + '级领导'
    },
    filterPhone(val) {
      if (val) {
        return val.substring(0, 3) + '****' + val.substring(7, 11)
      } else {
        return '--'
      }
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    },
    hasFile() {
      if (this.uploadForm.groupRuleAnnex && this.uploadForm.groupRuleAnnex.length) return true
      else return false
    }
  },
  methods: {
    // clearCookie() {
    //   var groupId = this.groupId + '_'
    //   try {
    //     // 检查 atMeuser[groupId] 是否存在且长度大于 0
    //     if (this.$cookies.get('atmeuser') && this.$cookies.get('atmeuser')[groupId] && this.$cookies.get('atmeuser')[groupId].length > 0) {
    //       var atMeuser = this.$cookies.get('atmeuser')
    //       atMeuser[groupId] = []
    //       this.$cookies.set('atmeuser', JSON.stringify(atMeuser))
    //     }

    //     // 检查 privateUser[groupId] 是否存在且长度大于 0
    //     if (this.$cookies.get('privateuser') && this.$cookies.get('privateuser')[groupId] && this.$cookies.get('privateuser')[groupId].length > 0) {
    //       var privateUser = this.$cookies.get('privateuser')
    //       privateUser[groupId] = []
    //       this.$cookies.set('privateuser', JSON.stringify(privateUser))
    //     }

    //     // 检查 privateReply[groupId] 是否存在且长度大于 0
    //     if (
    //       this.$cookies.get('privatereply') &&
    //       this.$cookies.get('privatereply')[groupId] &&
    //       this.$cookies.get('privatereply')[groupId].length > 0
    //     ) {
    //       var privateReply = this.$cookies.get('privatereply')
    //       privateReply[groupId] = []
    //       this.$cookies.set('privatereply', JSON.stringify(privateReply))
    //     }
    //   } catch (e) {
    //     console.error(e)
    //   }
    // },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        this.uploadForm.groupRuleAnnex = []
      }
      return isLt2M
    },
    downloadFile(fileUrl) {
      var URL = this.$tools.getStsFileUrl(this.$store.state.uid, fileUrl)
      window.location.href = URL
    },
    showRule() {
      if (
        (this.group_info.groupRule || (this.group_info.groupRuleAnnexList && this.group_info.groupRuleAnnexList.length)) &&
        this.group_info.groupRuleSetting
      ) {
        this.hiddenBtn = true
        this.chat_rules = true
      }
    },
    openRuleEdit() {
      const { groupRule, groupName, groupRuleAnnexList, groupRuleSetting } = this.group_info
      let groupRuleAnnex = []
      if (groupRuleAnnexList && groupRuleAnnexList.length) {
        const { fileKey, fileUrl, folderName, fileSuffix, fileType, fileSize, createUi } = groupRuleAnnexList[0]
        groupRuleAnnex = [{ fileKey, fileUrl, folderName, fileSuffix, fileType, fileSize, createUi }]
      }
      this.uploadForm = {
        groupRule: groupRule ? groupRule.join('\n') : '',
        groupName,
        groupRuleAnnex,
        groupRuleSetting: groupRuleSetting ? true : false
      }
      console.log('this.uploadForm================', this.uploadForm)
      this.chat_rules_edit = true
      //打开时清空文件
      this.$nextTick(() => {
        this.$refs.uploadRef.clearFiles()
      })
    },
    //获取群聊成员列表
    getremberList() {
      // console.log(this.query, 666)
      var data = [
          {
            userId: this.uid,
            groupId: this.query.groupId,
            keywords: this.memberKeywords
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupMember'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              data.data.forEach((item) => {
                item.is_show_member_menu = false
                item.is_show_member_home = false
              })
              this.member_list = data.data
              this.is_member_delete = !!data.addUserType
              this.addUserType = data.addUserType
              this.member_count = data.data.length
              this.$emit('groupMember', data.data)
            } else if (data.code === 452) {
              // this.clearCookie()
              this.$router.push('/main/group_chat')
              this.$parent.$parent.$emit('getNewChatList', this.query.groupId)
            }
          })
        })
        .catch((error) => {})
    },
    /**
     * 处理群规则通知
     */
    processingChatRules(handleType) {
      var data = [{ userId: this.uid, groupId: this.query.groupId, handleType: handleType }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/handleGroupRule'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (handleType == 2) {
                // this.clearCookie()
                // this.$parent.$parent.$emit('getNewChatList',this.query.groupId)
                this.$router.push('/main/#/pc?tab=chat')
              }
              this.$message({
                message: data.message,
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.chat_rules = false
                  // console.log(this.$route)
                  this.$tools.refreshRouter(this)
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  this.chat_rules = false
                  this.$tools.refreshRouter(this)
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    delFile() {
      this.$refs.uploadRef.clearFiles()
      this.uploadForm.groupRuleAnnex = []
    },
    //取消保存群规则
    cancelRule() {
      this.$refs.uploadRef.clearFiles()
      this.uploadForm = {}
      this.chat_rules_edit = false
    },
    //保存群规则
    saveRule() {
      this.loading = true
      const { groupRule, groupRuleAnnex, groupRuleSetting } = this.uploadForm
      var data = [
          {
            userId: this.uid,
            groupId: this.query.groupId,
            groupRule,
            groupRuleAnnex: JSON.stringify(groupRuleAnnex),
            groupRuleSetting: groupRuleSetting ? 1 : 0,
            groupName: this.group_info.groupName,
            type: 3,
            groupRuleAnnexChange: true
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/updateCustomGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            console.log('saveRule============', response)

            var data = response[0].data
            if (data.code === 200) {
              // if (handleType == 2) {
              //   // this.clearCookie()
              //   // this.$parent.$parent.$emit('getNewChatList',this.query.groupId)
              //   this.$router.push('/main/#/pc?tab=chat')
              // }
              this.$message({
                message: data.message,
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.chat_rules_edit = false
                  // console.log(this.$route)
                  this.$tools.refreshRouter(this)
                  this.loading = false
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  this.chat_rules_edit = false
                  this.$tools.refreshRouter(this)
                  this.loading = false
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    httpRequest(req) {
      this.$tools.getStsClient(this, req.file, (state, client, bucketName, file) => {
        if (state) {
          this.uploadFileAnnex(client, bucketName, file)
        }
      })
    },
    uploadFileAnnex(client, bucketName, file) {
      this.loading = true
      var time = new Date().getTime() + '',
        key = time.split('').reverse().join('') + this.$tools.getRandomName(file)
      var params = {
        Body: file,
        Bucket: bucketName,
        Key: key,
        ContentDisposition: `attachment; filename="${encodeURIComponent(file.name)}"`
      }
      client
        .putObject(params, (err, data) => {
          if (err) {
          } else {
            this.loading = false
            this.onSuccess(file, key)
          }
        })
        .on('httpUploadProgress', (progress) => {
          // this.onProgress(progress, file)
        })
    },
    onSuccess(file, key) {
      let pos = file.name.lastIndexOf('.')
      let suffix = file.name.substring(pos + 1)
      this.uploadForm.groupRuleAnnex = [
        {
          fileKey: key,
          fileUrl: 'https://www.ccccdt.com/ccccdt/' + key,
          folderName: file.name,
          fileSuffix: suffix,
          fileType: 6,
          fileSize: file.size,
          createUid: this.uid
        }
      ]
      this.loading = false
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多添加1个附件`)
    },
    // 邀请人员弹窗
    isShowInvite() {
      this.inviteIsShow = true
    },
    // 获取搜索邀请人员列表
    searchInviteList() {
      var data = [{ userId: this.uid, groupId: this.query.groupId, keywords: this.keywords }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/allInviteUserSelector'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.length == 0) {
                this.$message({
                  message: '用户不存在或者已经在聊天室中',
                  type: 'warning',
                  duration: 2000,
                  onClose: () => {}
                })
                return
              }
              data.data.forEach((item) => {
                // 重置checked和radio属性
                item.checked = false
                item.radio = item.enableHistoryMsg == 1
                // 检查item是否存在于anotherArray中
                var existsInAnotherArray = this.inviteCooseList.some((anotherItem) => anotherItem.userId === item.userId)
                // 如果存在，将checked设置为true
                if (existsInAnotherArray) {
                  item.checked = true
                  // 找到另一个数组中相同user_id的对象
                  var matchingItem = this.inviteCooseList.find((anotherItem) => anotherItem.userId === item.userId)
                  if (matchingItem) {
                    item.radio = matchingItem.radio // 将radio值设置为匹配对象的radio值
                  }
                }
              })
              this.inviteList = data.data
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    // 搜索出来的成员列表被选中之后
    selectedItem(val, items) {
      // 首先检查对象是否存在于数组中
      const exists = this.inviteCooseList.some((item) => item.userId === items.userId)

      if (val && !exists) {
        // 如果val为真且对象不存在，则添加到数组中
        if (items.hasOwnProperty('can_delete')) {
          // 如果有，检查其值是否为1
          // return obj.can_delete === 1
          if (items.can_delete == 1) {
            this.inviteCooseList.push(items)
          } else {
            items.checked = false
            this.$message({
              message: '该成员不能删除',
              type: 'warning',
              duration: 2000,
              onClose: () => {}
            })
          }
        } else {
          // 如果没有，返回true
          this.inviteCooseList.push(items)
        }
      } else if (!val && exists) {
        // 如果val为假且对象存在，则从数组中删除
        this.inviteCooseList = this.inviteCooseList.filter((item) => item.userId !== items.userId)
      }
    },
    // 历史消息是否可见
    selectedItemHistory(val, items) {
      var matchingItem = this.inviteCooseList.find((anotherItem) => anotherItem.userId === items.userId)
      if (matchingItem) {
        matchingItem.radio = val // 将radio值设置为匹配对象的radio值
      }
      var matchingItem1 = this.inviteList.find((anotherItem) => anotherItem.userId === items.userId)
      if (matchingItem1) {
        matchingItem1.radio = val // 将radio值设置为匹配对象的radio值
      }
    },
    /**删除选中的被邀请的人员 */
    deleteInviteItem(item) {
      // 假设我们要删除id为2的对象
      var removeObject = this.inviteCooseList.find((obj) => obj.userId === item.userId)
      var removeObject1 = this.inviteList.find((obj) => obj.userId === item.userId)
      if (removeObject) {
        this.inviteCooseList = this.inviteCooseList.filter((obj) => obj !== removeObject)
      }
      if (removeObject1) {
        removeObject1.checked = false
      }
    },
    // 确认添加邀请人员
    confirmInvite() {
      this.inviteLock = true
      var joinUserJson = this.inviteCooseList.map(function (obj) {
        return { userId: obj.userId, enableHistoryMsg: obj.radio ? 1 : 0 }
      })

      var data = [
          {
            userId: this.uid,
            groupId: this.query.groupId,
            // user_role: '0',
            joinUserJson: JSON.stringify(joinUserJson)
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/inviteUser'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.handleClose()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  this.handleClose()
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    // 添加删除弹窗 关闭前操作
    handleClose(done) {
      this.keywords = ''
      this.inviteIsShow = false
      this.deleteIsShow = false
      this.inviteList = []
      this.inviteCooseList = []
      this.inviteLock = false
      this.deleteLock = false
      // done()
    },
    // 删除人员弹窗
    isShowDelet() {
      this.member_list.forEach((item) => {
        item.checked = false
      })
      this.inviteList = this.member_list
      this.deletSearchArr = this.member_list
      this.deleteIsShow = true
    },
    // 实现删除人员的模糊搜索
    fuzzySearch() {
      const lowerCaseSearchTerm = this.keywords.toLowerCase()
      this.inviteList = this.deletSearchArr.filter((item) => {
        // 检查user_id, user_name, safe_phone是否包含搜索词
        const userIdMatch = item.userId.toString().includes(lowerCaseSearchTerm)
        const userNameMatch = item.userName.toLowerCase().includes(lowerCaseSearchTerm)
        const safePhoneMatch = item.safePhone.includes(lowerCaseSearchTerm)
        // 如果任意一个属性匹配，则返回true
        return userIdMatch || userNameMatch || safePhoneMatch
        // return userIdMatch || userNameMatch
      })
      if (this.inviteList.length == 0) {
        this.$message({
          message: '非本群中成员',
          type: 'warning',
          duration: 2000
        })
      }
    },
    //  确认删除已有的成员
    confirmDelete() {
      this.deleteLock = true
      var deleteBindIdStr = this.inviteCooseList
        .map(function (obj) {
          return obj.bindId
        })
        .join(',')
      var data = [
          {
            userId: this.uid,
            groupId: this.query.groupId,
            deleteBindId: deleteBindIdStr,
            delete_type: '4'
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/deleteUser'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              // this.getremberList()
              this.$message({
                message: data.message,
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.handleClose()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  this.handleClose()
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    //移除成员列表
    removeOutConfirm(userId, userName, deleteBindId, index) {
      if (this.pure_user_id && this.pure_user_id == userId) {
        // this.$confirm('该操作需要退出纯净模式，确定退出吗?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   cancelButtonClass: 'el-button--primary is-plain',
        //   iconClass: 'el-none-icon'
        // })
        //   .then(() => {
        //     this.exitPureMode(null, userId, userName, deleteBindId, index)
        //   })
        //   .catch(() => {})
      } else {
        this.$confirm('确认要删除该成员吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'dt-button-cancle is-plain',
          type: 'warning'
        })
          .then(() => {
            this.removeOutChat(deleteBindId, index)
          })
          .catch(() => {})
      }
    },
    removeOutChat(deleteBindId, index) {
      var data = [{ userId: this.uid, groupId: this.query.groupId, deleteBindId: deleteBindId, delete_type: '4' }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/deleteUser'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.getremberList()
              this.$message({
                message: data.message,
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.member_list.splice(index, 1)
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    // 获取 群聊规则
    getChatRules() {
      var data = [{ groupId: this.query.groupId, userId: this.uid }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupInfo'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.groupRule) {
                data.data.groupRule = data.data.groupRule.split('\n')
              }
              this.group_info = data.data
              this.$emit('groupInfo', this.group_info)
              // this.chat_rules = true
            } else if (data.code === 457) {
              this.chat_rules = true
              this.hiddenBtn = false
            } else {
              console.log('daozhelema====================')
              this.$router.push('/main/#/pc?tab=chat')
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    chatRulesShow() {
      this.getChatRules()
      this.hiddenBtn = false
      this.chat_rules = true
    },
    //聊天头像右键菜单
    showSendMenu(event, item, type, index, eleClient, eleOffset) {
      this.$emit('childShortcutMenuEvent', item)
      if (type === 'member') {
        this.member_list.forEach((item) => {
          item.is_show_member_menu = false
          item.is_show_member_home = false
        })
        item.is_show_member_menu = true

        // let currentElement = event.target
        // console.log(currentElement, 9999)
        // let height = currentElement.parentElement.querySelector('.dt-member-ul').offsetHeight
        const refList = this.$refs[item.groupId + '-' + index]
        if (!refList || refList.length === 0) {
          console.error('No elements found for ref:', item.groupId)
          return
        }
        var menuNode = refList[0].querySelector('.dt-member-item ul')
        if (!menuNode) {
          console.error('No dt-member-item ul found within ref:', item.groupId)
          return
        }
        // 使用requestAnimationFrame确保在下次重绘之前获取高度
        requestAnimationFrame(() => {
          // console.log(menuNode.offsetHeight) // 现在应该能获取到正确的高度
          // 视口高度
          const viewportHeight = window.innerHeight
          // 获取鼠标点击位置相对于视口的坐标
          const clientX = event.clientX
          const clientY = event.clientY
          // 获取div的偏移量
          const rect = refList[0].getBoundingClientRect()
          const offsetX = clientX - rect.left
          const offsetY = clientY - rect.top
          if (offsetX + 118 > 279) {
            menuNode.style.left = offsetX - 120 + 'px'
          } else {
            menuNode.style.left = offsetX + 2 + 'px'
          }
          if (clientY + menuNode.offsetHeight > viewportHeight) {
            menuNode.style.top = offsetY - menuNode.offsetHeight + 'px'
          } else {
            menuNode.style.top = offsetY + 2 + 'px'
          }
        })
      }
      // this.surplusPosition(event, 122, eleClient, eleOffset)
    },
    //个人头像计算位置
    offset(element, direction, eleOffset) {
      var offsetDir = 'offset' + direction[0].toUpperCase() + direction.substring(1)
      var realNum = element[offsetDir]
      var positionParent = element.offsetParent
      while (positionParent != null && positionParent.className !== eleOffset) {
        realNum += positionParent[offsetDir]
        positionParent = positionParent.offsetParent
      }
      return realNum
    },
    //个人头像计算底部剩余位置
    surplusPosition(event, homeHeight, eleClient, eleOffset) {
      let chatHeight = eleClient.clientHeight
      let offsetTop = this.offset(event.target, 'top', eleOffset)
      let scrollTop = eleClient.scrollTop
      let curElePosition = offsetTop - scrollTop
      let surplusPosition = chatHeight - curElePosition

      if (homeHeight < surplusPosition) {
        this.is_card_up = false
      } else {
        this.is_card_up = true
      }
    },
    //聊天头像个人主页
    showSendHome(event, type, item, eleClient, eleOffset) {
      this.$emit('childShortcutMenuEvent', item)
      this.home_info = {}
      if (item.userId == -2) {
        // this.chatList.forEach((item) => {
        //   item.is_show_send_home = false
        //   item.is_show_send_menu = false
        // })
        this.member_list.forEach((item) => {
          item.is_show_member_home = false
          item.is_show_member_menu = false
        })
        return
      }
      if (type === 'member') {
        this.member_list.forEach((item) => {
          item.is_show_member_home = false
          item.is_show_member_menu = false
        })
        item.is_show_member_home = true
      }
      this.surplusPosition(event, 236, eleClient, eleOffset)

      var data = [{ userId: item.userId, loginType: 1 }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/user/userInfo'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.home_info = data.data
              let currentElement = event.target
              let height = currentElement.parentElement.querySelector('.dt-home-info').offsetHeight
              this.surplusPosition(event, height, eleClient, eleOffset)
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //右击头像快捷菜单
    shortcutMenu(item) {
      // console.log('shortcutMenu=================', item)
      this.$emit('childShortcutMenuEvent', item)
    },
    shortcutMenuOff() {
      this.member_list.forEach((item) => {
        item.is_show_member_home = false
        item.is_show_member_menu = false
      })
    },
    // 监听群成员变化更新群成员列表
    groupMemeberChange(data) {
      this.getremberList()
    },
    // 监听群规则变化弹窗提示
    groupRuleChange() {
      this.chatRulesShow()
    }
  },
  mounted() {
    // //隐藏右键菜单
    $(document).on('click contextmenu', () => {
      // if (this.chatList) {
      // this.chatList.forEach((item) => {
      //   item.is_show_send_menu = false
      //   item.is_show_send_home = false
      // })
      this.member_list.forEach((item) => {
        item.is_show_member_menu = false
        item.is_show_member_home = false
      })
      // }
    })
    if (this.query.groupId) {
      this.getChatRules()
      this.getremberList()
    }
    var timer = setInterval(() => {
      if (this.$socket) {
        this.$socket.removeAllListeners('group_memeber_change')
        this.$socket.removeAllListeners('group_rule_change')
        // this.$socket.removeAllListeners('delete_custom_group')
        clearInterval(timer)
        this.$socket.on('group_memeber_change', (data) => {
          var _data = JSON.parse(data)
          this.groupMemeberChange(_data)

          // console.log('group_memeber_change  私聊群=', data)
          if (this.query.groupId && data == 2) {
            this.getChatRules() //群主转让群信息更新
          }
        })
        this.$socket.on('delete_custom_group', (data) => {
          // var _data = JSON.parse(data)
          // this.groupMemeberChange(_data)
          this.$router.push({ path: '/main/#/pc?tab=chat' })
          this.$emit('getGroupList') //更新群列表
          console.log('delete_custom_group  私聊群=', data)
        })
        this.$socket.on('group_rule_change', (data) => {
          console.log('group_rule_change  私聊群==============', data)
          var _data = JSON.parse(data)
          this.groupRuleChange(_data)
        })
      }
    }, 10)
  },
  created() {
    // 使用防抖函数处理点击事件
    this.debouncedSearch = this.$tools.debounce(this.getremberList, 580)
  },
  watch: {
    //路由hash变化 加载组件
    $route(to, from) {
      if (to.hash !== from.hash) {
        if (!to.hash.includes('tab=org') && this.query.groupId) {
          this.getChatRules()
          this.getremberList()
        }
        // if (this.query.groupId) {
        //   this.getChatRules()
        //   this.getremberList()
        // }
        this.uploadForm.groupRuleAnnex = []
        this.uploadForm = {}
        this.memberKeywords = ''
      }
    }
  }
}
</script>
<style scoped>
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.dt-talk-member {
  padding: 16px 0px;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-left: 1px solid #e1e6f0;
}

.dt-member-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 0 16px;
}
.dt-member-title span {
  font-size: 16px;
  color: #1f1f1f;
}
.dt-member-opera img {
  vertical-align: -1px;
  margin-right: 5px;
  cursor: pointer;
}
.dt-member-opera i {
  font-size: 18px;
  cursor: pointer;
  color: #606266;
}

.dt-member-opera .el-icon-plus {
  font-size: 14px;
  cursor: pointer;
  color: rgba(96, 98, 102, 0.96);
}
.dt-member-item {
  height: 38px;
  line-height: 38px;
  padding: 0 16px;
  cursor: pointer;
  position: relative;
}
.dt-member-item:hover {
  background-color: #f0f5ff;
}

.dt-member-item em {
  color: #597ef7;
}

.dt-member-item ul {
  width: 100px;
  border: 1px solid #e1e6f0;
  border-radius: 2px;
  position: absolute;
  left: 50px;
  top: 30px;
  background-color: #fff;
  z-index: 10;
}
.dt-member-item ul.up {
  /* top: -126px; */
  bottom: 80%;
  top: auto;
}
.dt-member-item li {
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  color: #1f1f1f;
  white-space: nowrap;
}
.dt-member-item li:hover {
  background-color: #f0f7ff;
}
.dt-remove-group {
  border-top: 1px solid #e9eef7;
}
.dt-remove-group li {
  margin-top: 4px;
}

.dt-member-item-headimg {
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  margin-right: 5px;
}

.dt-member-item-headimg .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.dt-member-item-headimg .el-image {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.dt-member-item-headimg .el-image >>> img {
  width: auto;
  height: auto;
}

.dt-member-item-headimg .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
/* 群聊规则弹窗样式 */
.dt-chat-group-rules >>> .el-dialog__header {
  padding: 18px 20px;
  border-bottom: 1px solid #e9eef7;
}
.dt-chat-group-rules >>> .el-form-item {
  margin-bottom: 15px;
}
.dt-chat-group-rules >>> .el-form-item:nth-child(3) {
  margin-bottom: 0;
}
.dt-chat-group-rules-tips,
.dt-chat-group-rules-content {
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.dt-chat-group-rules-content p span {
  white-space: pre-wrap;
}
/* .dt-chat-group-rules-tips {
  margin-bottom: 26px;
} */
.dt-chat-group-rules-content {
  padding: 0;
  box-sizing: border-box;
}

.dt-chat-group-rules-content > p:nth-last-of-type(2),
.dt-chat-group-rules-content > p:last-of-type {
  text-align: right;
}
.dt-chat-group-rules >>> .el-dialog__title {
  font-size: 18px;
  color: #1f1f1f;
}
.dt-chat-group-rules >>> .el-dialog__body {
  height: 350px; /* 设置最大高度 */
  box-sizing: border-box;
  padding: 20px;
  overflow-y: auto; /* 根据需要显示滚动条 */
}
.dt-chat-group-set-rules >>> .el-dialog__body {
  height: auto;
}
.dt-chat-group-rules >>> .el-dialog__footer {
  border-top: 2px solid #ecf0f8;
  box-sizing: border-box;
  padding: 14px 20px;
}

/* ---------------群规则start---------------- */
.tr {
  text-align: right;
}

.dt-chat-group-rules-content .file {
  margin-top: 12px;
  width: 100%;
  /* height: 64px; */
  background: #ffffff;
  border: 1px solid #e9eef7;
  flex-shrink: 0;
  padding: 14px 12px;
  display: flex;
  box-sizing: border-box;
}

.dt-chat-group-rules-content .noTop {
  margin-top: 0;
}

.dt-chat-group-rules-content .file img {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

.dt-chat-group-rules-content .file .right {
  flex: 1;
}

.dt-chat-group-rules-content .file .right .name {
  /* line-height: 16px; */
  font-family: Microsoft YaHei;
  color: #1f1f1f;
  font-size: 14px;
  width: 550px;
  margin-top: -3px;
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis; */
}
.dt-chat-group-rules-content .file .right .size {
  font-family: Microsoft YaHei;
  color: #909399;
  font-size: 12px;
  /* margin-top: 4px; */
}

.upload-box {
  display: flex;
  align-items: center;
}
.upload-box .btn {
  width: 96px;
  height: 32px;
  border: 1px solid;
  border-radius: 4px;
  margin-right: 4px;
  padding-top: 8px;
  line-height: 1;
  box-sizing: border-box;
  font-family: Microsoft YaHei;
  color: #c0c4cc;
  font-size: 12px;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.upload-box .hasFile {
  color: #c0c4cc;
  border: 1px solid #f2f3f5;
}

.upload-box .btn i {
  margin-right: 6px;
}

.upload-box .tip {
  line-height: 21px;
  font-family: MicrosoftYaHei;
  color: #909399;
  font-size: 12px;
}

.upload-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 540px; */
  height: 28px;
  border-radius: 4px;
  padding: 6px 8px;
  box-sizing: border-box;
  margin-top: 8px;
}

.upload-info:hover {
  background: #f0f5ff;
}

.upload-info .name {
  font-family: MicrosoftYaHei;
  color: #1f1f1f;
  font-size: 12px;
  /* display: flex;
  align-items: center; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 500px;
}

.upload-info .name img {
  width: 10px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}

.upload-info .btn {
  font-family: MicrosoftYaHei;
  color: #2f54eb;
  font-size: 12px;
  text-align: right;
  cursor: pointer;
}
/* ---------------群规则end---------------- */

/* 邀请聊天弹窗样式 */
.dialog-Box-cointent-left,
.dialog-Box-cointent-right {
  width: 50%;
  box-sizing: border-box;
  /* padding: 0 px 20px; */
}
.dialog-Box-cointent-left {
  border-right: 1px solid #e5e5e5;
}
.dialog-Box-cointent-search {
  padding-right: 20px;
  margin-top: 8px;
}

.dialog-Box-cointent-searchResult {
  margin-top: 10px;
  height: 600px;
  overflow: auto;
}

.dialog-Box-cointent-searchItem {
  /* line-height: 60px; */
  height: 60px;
  display: grid;
  grid-template-rows: 60px;
  grid-template-columns: 1fr 5fr 1px 118px;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
}
.dialog-Box-cointent-searchItem:hover {
  background-color: #f0f5ff;
}
.dialog-Box-cointent-deletItem:hover {
  background-color: #f0f5ff;
}
.dialog-Box-cointent-searchItem img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.dialog-Box-cointent-searchItem-info {
  margin-left: 8px;
}
.dialog-Box-cointent-searchItem-info p:nth-of-type(1) {
  font-size: 14px;
  color: #1f1f1f;
  margin-bottom: 8px;
}
.dialog-Box-cointent-searchItem-info p:nth-of-type(2) {
  font-size: 12px;
  /* color: #606266; */
  color: #909399;
}
.dialog-Box-cointent-searchItem-line,
.dialog-Box-cointent-chooseItem-line {
  width: 1px;
  height: 38px;
  background-color: #e5e5e5;
}
.dialog-Box-cointent-searchItem-invite {
  padding-left: 12px;
}
.dialog-Box-cointent-searchItem-invite p:nth-of-type(1) {
  margin-bottom: 0px;
}
.dialog-Box-cointent-searchItem-invite p.invited:nth-of-type(1) {
  margin-bottom: 8px;
}
.dialog-Box-cointent-searchItem-invite p:nth-of-type(1) >>> .el-checkbox__label {
  font-size: 12px;
  color: #606266;
}
.dialog-Box-cointent-searchItem-invite p:nth-of-type(2) {
  font-size: 12px;
  color: #85a5ff;
}
.ml {
  margin-left: 10px;
}
.dialog-Box-cointent-searchList {
  /* padding-left: 12px; */
  margin-right: 20px;
}
.dialog-Box-cointent-searchResult::-webkit-scrollbar-thumb,
.dialog-Box-cointent-choose::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  /* 设置滚动条颜色 */
  border-radius: 4px;
  /* 设置滚动条圆角 */
}
.dialog-Box-cointent-searchResult::-webkit-scrollbar,
.dialog-Box-cointent-choose::-webkit-scrollbar {
  width: 6px;
  /* 设置滚动条宽度 */
}
.dialog-Box-cointent-right {
  padding-left: 20px;
}
.dialog-Box-cointent-right-title {
  font-size: 12px;
  color: #1f1f1f;
  line-height: 44px;
}
.dialog-Box-cointent-choose {
  /* padding-left: 12px; */
  height: 540px;
  overflow: auto;
}
.dialog-Box-cointent-chooseItem {
  height: 60px;
  display: grid;
  grid-template-rows: 60px;
  grid-template-columns: 38px 5fr 1px 146px;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 12px;
}
.dialog-Box-cointent-chooseItem:hover {
  background-color: #f0f5ff;
}
.dialog-Box-cointent-deletItem {
  height: 60px;
  display: grid;
  grid-template-rows: 60px;
  grid-template-columns: 38px 7fr 1fr;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 12px;
}
/* .dialog-Box-cointent-deletItem img {
  width: 38px;
  height: 38px;
  margin-left: 12px;
  border-radius: 50%;
}
.dialog-Box-cointent-chooseItem img {
  width: 38px;
  height: 38px;
  margin-left: 12px;
  border-radius: 50%;
} */
.dialog-Box-cointent-searchItem >>> .el-checkbox__label {
  vertical-align: middle;
}
.dialog-Box-cointent-searchItem .el-image,
.dialog-Box-cointent-chooseItem .el-image,
.dialog-Box-cointent-deletItem .el-image {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #fff;
  overflow: hidden;
}
.dialog-Box-cointent-searchItem .el-image >>> img,
.dialog-Box-cointent-chooseItem .el-image >>> img,
.dialog-Box-cointent-deletItem .el-image >>> img {
  width: auto;
  height: auto;
}
.dialog-Box-cointent-searchItem .el-image .image-slot,
.dialog-Box-cointent-chooseItem .el-image .image-slot,
.dialog-Box-cointent-deletItem .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.dialog-Box-cointent-chooseItem-info {
  margin-left: 8px;
}
.dialog-Box-cointent-chooseItem-info p:nth-of-type(1) {
  font-size: 14px;
  color: #1f1f1f;
  margin-bottom: 8px;
}
.dialog-Box-cointent-chooseItem-info p:nth-of-type(2) {
  font-size: 12px;
  /* color: #606266; */
  color: #909399;
}
.dialog-Box-cointent-chooseItem-invite {
  padding-left: 12px;
}
.dialog-Box-cointent-chooseItem-invite p:nth-of-type(1) {
  margin-bottom: 0px;
}
.dialog-Box-cointent-chooseItem-invite p:nth-of-type(1) >>> .el-checkbox__label {
  font-size: 12px;
  color: #606266;
}
.dialog-Box-cointent-chooseItem-invite p:nth-of-type(2) {
  color: #85a5ff;
}
.dialog-Box-cointent-chooseItem-invite >>> .el-radio {
  margin-right: 0px;
}
.dialog-Box-cointent-chooseItem-invite i {
  font-size: 16px;
  margin-left: 12px;
  cursor: pointer;
}
.dialog-Box-cointent-choose-btn {
  display: flex;
  justify-content: right;
  align-items: center;
  height: 63px;
  line-height: 63px;
  border-top: 1px solid #e5e5e5;
  margin-left: -20px;
  margin-right: -20px;
  padding-right: 20px;
}
.dialog-Box-cointent-choose-btn >>> .el-button {
  width: 96px;
}
.dialog-Box-cointent-searchItem-invite >>> .el-checkbox__inner,
.dialog-Box-cointent-chooseItem-invite >>> .el-checkbox__inner {
  border-radius: 50%; /* 使Checkbox为圆形 */
  width: 14px; /* 设置Checkbox的大小 */
  height: 14px; /* 设置Checkbox的大小 */
}
.dialog-Box-cointent-searchItem-invite.el-checkbox__input.is-checked >>> .el-checkbox__inner,
.dialog-Box-cointent-chooseItem-invite.el-checkbox__input.is-checked >>> .el-checkbox__inner {
  background-color: #409eff; /* 选中时的背景颜色 */
  border-color: #409eff; /* 选中时的边框颜色 */
}
.dialog-Box-cointent-searchItem-invite >>> .el-checkbox__inner::after,
.dialog-Box-cointent-chooseItem-invite >>> .el-checkbox__inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%) !important;
}
.dialogBox >>> .el-dialog__header {
  font-size: 18px;
  color: #1f1f1f;
}
.flr {
  /* float: right; */
  margin-left: 10px;
}
.dt-el-popper {
  border-color: #66b1ff;
}
/* 个人信息页 */
.dt-home-info {
  position: absolute;
  top: -3px;
  left: 30px;
  border-radius: 8px;
  width: 312px;
  z-index: 11;
}
.dt-home-info.left {
  top: -3px;
  left: -318px;
}
.dt-home-info.up {
  bottom: 20px;
  top: inherit;
}
.dt-home-info.left.up {
  bottom: 20px;
  top: inherit;
}
.dt-home-info >>> .el-card__body {
  width: 280px;
  min-height: 188px;
  padding: 16px 16px 10px;
}
.dt-home-info dt {
  display: flex;
  display: -webkit-flex;
  padding-bottom: 16px;
  border-bottom: 1px solid #ddd;
}
.dt-home-info .dt-home-head-img {
  display: block;
  margin-right: 18px;
  width: 52px;
  height: 52px;
}
.dt-home-info .dt-home-head-img .el-image {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.dt-home-info .dt-home-head-img .el-image >>> img {
  width: auto;
  height: auto;
}
.dt-member-item-headimg .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.dt-chat-content-headimg {
  cursor: pointer;
}
.dt-home-info .dt-home-realName {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
}
.dt-home-realName h3 {
  color: #1f1f1f;
  height: 22px;
  line-height: 22px;
}
.dt-home-realName div {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
}
.dt-home-realName i {
  display: block;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  background: url(/skb/img/girl.png) no-repeat center;
}
.dt-home-realName i.boy {
  background: url(/skb/img/boy.png) no-repeat center;
}
.dt-home-uid {
  font-size: 12px;
  color: #909399;
  height: 22px;
  line-height: 22px;
}
.dt-home-info dd {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  line-height: 20px;
}
.dt-home-info dd div {
  padding: 5px 0px;
  display: flex;
  display: -webkit-flex;
}
.dt-home-info .dt-home-dd {
  padding: 10px 0px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}
.dt-home-info .dt-home-label {
  display: block;
  width: 70px;
  color: #909399;
}
.dt-home-info .dt-home-cont {
  width: 210px;
  color: #1f1f1f;
}
.dt-home-info >>> .el-loading-parent--relative {
  top: 100px;
}
/* 闪烁的动画 */
@keyframes blink-background {
  0% {
    background-color: rgba(255, 255, 255, 0); /* 白色透明 */
  }
  10% {
    background-color: rgba(214, 228, 255, 1); /* 半透明灰色 */
  }
  40% {
    background-color: rgba(214, 228, 255, 1); /* 保持半透明灰色 */
  }
  70% {
    background-color: rgba(255, 255, 255, 0); /* 变回白色透明 */
  }
  100% {
    background-color: rgba(255, 255, 255, 0); /* 保持白色透明 */
  }
}

.flashing {
  animation: blink-background 4s linear 1; /* 应用动画，无限循环 */
}
.dialog-Box-cointent-searchItem-check {
  padding-left: 12px;
}
.dialog-Box-cointent-searchItem-check >>> .el-checkbox__label {
  padding-top: 4px;
}

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rule-box {
  flex-shrink: 0;
  border-bottom: 1px solid #e9eef7;
  margin-bottom: 16px;
  width: 279px;
  height: 186px;
  padding: 8px 16px 16px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.rule-box:hover {
  background: #f0f5ff;
}

.rule-box .rule-empty {
  font-family: Microsoft YaHei;
  color: #606266;
  font-size: 14px;
  margin: 94px auto;
  text-align: center;
}
.rule-box .content {
  line-height: 22px;
  font-family: Microsoft YaHei;
  color: #1f1f1f;
  font-size: 14px;
  overflow: hidden;
  width: 100%;
}
.rule-box .content p span {
  white-space: pre-wrap;
}
.span-zw {
  color: transparent;
}
.rule-box .content p {
  word-wrap: break-word;
}

.rule-box .none {
  height: 8px;
  flex-shrink: 0;
  /* background-color: #ffffff; */
}
.rule-box .file {
  width: 248px;
  height: 64px;
  background: #ffffff;
  border: 1px solid #e9eef7;
  flex-shrink: 0;
  padding: 14px 12px;
  display: flex;
  box-sizing: border-box;
}
.rule-box .file img {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 10px;
}
.rule-box .file .right {
  flex: 1;
}
.rule-box .file .name {
  width: 178px;
  line-height: 19px;
  font-family: Microsoft YaHei;
  color: #1f1f1f;
  font-size: 14px;
}
.rule-box .file .size {
  font-family: Microsoft YaHei;
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}
.dt-member-search {
  margin: 8px 0px;
  padding: 0px 16px;
}
.dt-member-search >>> .el-input__inner {
  height: 28px;
  line-height: 28px;
}
.dt-member-search >>> .el-input__suffix {
  padding-top: 7px;
}
.dt-member-no {
  text-align: center;
  color: #606266;
  margin-top: 95px;
}
</style>
